<!DOCTYPE html>
<html>
  <head>
  	<meta charset='UTF-8'/>
  	<meta name='viewport' content='width=device-width,initial-scale=1'/> 
    <title>蘑菇田</title>
    <link rel='stylesheet' href='/stylesheets/index.css'/>
  </head>
  <body onresize='mogu.resize()' onbeforeunload='return mogu.checkLeave()'>
    <div id='renrenPage'></div>
    <div id='desktopPage' class='page'>
      <div name='changeAccountNav' id='pageNav0' class='pageNav'>
        <img onclick='mogu.page.account.show();'/>
      </div>
      <div name='playMusicNav' id='pageNav1' class='pageNav'>
        <img onclick='mogu.page.music.show();'/>
      </div>
      <div name='wuziqiNav' id='pageNav2' class='pageNav'>
        <img onclick='mogu.page.wuziqi.show();'/>
      </div>
      <div name='aboutNav' id='pageNav3' class='pageNav'>
        <img onclick='mogu.page.about.show();'/>
      </div>
    </div>
    <div id='accountPage' class='page'>
      <div class='pageHeader'>
        <div class='pageBackButton'>
          <img src='/images/icons/32x32/actions/gray-go-previous.png'/>
        </div>
        <div class='pageTitle'>
          <span>登录</span>
        </div>
        <div class='pageSettingButton'>
          <img src='/images/icons/32x32/actions/format-justify-fill.png'/>
        </div>
      </div>
      <div class='formArea' id='loginForm'>
        <div class='formInput'>
          <input id='loginAccountInput' type=text placeholder='账号'/>
        </div>
        <div class='formInput'>
          <input id='loginPasswordInput' type=password placeholder='密码'/>
        </div>
        <div class='formSubmit'>
          <input id='loginSubmit' type='button' value='登录' onclick='mogu.page.account.doLogin();'/>
        </div>
        <div class='formFooter'>
          <span id='findBackPassword' onclick='mogu.page.account.findBackPassword();'>找回密码</span>
          <span id='showRegForm'  onclick='mogu.page.account.showRegForm();'>立即注册</span>
        </div>
      </div>
      <div class='formArea' id='regForm'>
        <div class='formInput'>
          <input id='regAccountInput' type=text placeholder='账号'/>
        </div>
        <div class='formInput'>
          <input id='regPasswordInput' type=password placeholder='密码'/>
        </div>
        <div class='formInput'>
          <input id='regPasswordRepeatInput' type=password placeholder='密码确认'/>
        </div>
        <div class='formSubmit'>
          <input id='regSubmit' type='button' value='注册'  onclick='mogu.page.account.doReg();'/>
        </div>
      </div>
      <div id='userInfo'>
      </div>
    </div>
    <div id='musicPage' class='page'>
      <div class='pageHeader'>
        <div class='pageBackButton'>
          <img src='/images/icons/32x32/actions/gray-go-previous.png' onclick='mogu.page.music.back();'/>
        </div>
        <div class='pageTitle'>
          <span>音乐</span>
        </div>
        <div class='pageSettingButton'>
          <img src='/images/icons/32x32/actions/format-justify-fill.png'/>
        </div>
      </div>
      <div id='musicList'>
      </div>
      <div id='musicControlBox'>
        <img id='lastMusicButton' src='/images/icons/48x48/actions/media-skip-backward.png' onclick='mogu.page.music.playLast();'/>
        <img id='playMusicButton' src='/images/icons/48x48/actions/media-playback-start.png' onclick='mogu.page.music.playOrPause();'/>
        <img id='nextMusicButton' src='/images/icons/48x48/actions/media-skip-forward.png' onclick='mogu.page.music.playNext();'/>
      </div>
      <audio id='moguMusic'></audio>
    </div>
    <div id='wuziqiPage' class='page'>
      <div class='pageHeader'>
        <div class='pageBackButton'>
          <img src='/images/icons/32x32/actions/gray-go-previous.png' onclick='mogu.page.wuziqi.back();'/>
        </div>
        <div class='pageTitle'>
          <span>五子棋</span>
        </div>
        <div class='pageSettingButton'>
          <img src='/images/icons/32x32/actions/format-justify-fill.png'/>
        </div>
      </div>
    </div>
    <div id='aboutPage' class='page'>
      <div class='pageHeader'>
        <div class='pageBackButton'>
          <img src='/images/icons/32x32/actions/gray-go-previous.png' onclick='mogu.page.about.back();'/>
        </div>
        <div class='pageTitle'>
          <span>关于</span>
        </div>
        <div class='pageSettingButton'>
          <img src='/images/icons/32x32/actions/format-justify-fill.png'/>
        </div>
      </div>
    </div>
  </body>
  <script src='/javascripts/jquery-1.9.1.min.js'></script>
  <script src='/javascripts/socket.io.min.js'></script>
  <script src='/javascripts/index.js'></script>
</html>